<template>
  <el-card class="showUpdateUserinfo" v-show="isShow">
    <div slot="header" class="clearfix">
      <span style="font-size: 14px">修改填表人员</span>
      <el-button
        style="float: left; padding: 3px 0; font-size: 14px"
        type="text"
        @click="isShowUpdateUserinfo()"
        >取消</el-button
      >
      <el-button
        style="float: right; padding: 3px 0; font-size: 14px"
        type="text"
        @click="onSubmitUserinfos()"
        >添加</el-button
      >
    </div>
    <el-scrollbar class="scrollbarBox">
      <div class="box">
        <el-form ref="item" :model="item" label-width="80px">
          <el-form-item label="测评人员:">
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              @check="getCheckedNodes"
            >
            </el-tree>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
  </el-card>
</template>

<script>
import { $http } from "../../request/service";
export default {
  name: "",
  props: ["isShow"],
  components: {},
  data() {
    return {
      data: [],
      defaultProps: {
        children: "group",
        label: "name",
      },
      item: {},
      userinfoList: [],
    };
  },
  methods: {
    //提交选择的用户
    onSubmitUserinfos() {
      if(this.userinfoList.length == 0) {
         this.$message.warning("请至少选择一个调用对象！");
         return;
      }
      this.$emit("onSubmitUserinfos", this.userinfoList);
      this.isShowUpdateUserinfo();
    },
    //关闭创建题库
    isShowUpdateUserinfo() {
      this.$emit("isShowUpdateUserinfo");
    },
    //获取选中的用户
    getCheckedNodes(x, y) {
      this.userinfoList = [];
      y.checkedNodes.filter((item) => {
        if (item.group == undefined) {
          this.userinfoList.push(item);
        }
      });
    },
    //获取用户列表
    getUserinfoList() {
      $http.get("/target/group").then((res) => {
        if (res.code !== 200) return this.$message.error(res.message);
        this.data = res.data;
      });
    },
  },
};
</script>

<style scoped>
.scrollbarBox {
  height: calc(90vh - 80px);
}
.showUpdateUserinfo {
  width: 30vw !important;
  min-width: 400px !important;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.showCreateTopic .box {
  text-align: left;
}
</style>